<template>
  <div class="search_container">
    <input
      type="text"
      placeholder="请输入关键字搜索"
      v-model="inputObj.userInput"
      :id="inputObj.inputId"
    />
    <el-button type="primary" @click="btn">search</el-button>
  </div>
</template>

<script>
import bus from "@/eventBus/eventBus.js";

export default {
  data() {
    return {
      inputObj: {
        userInput: "",
        inputId: "searchInput",
      },
    };
  },
  mounted() {
    this.btn();
  },
  methods: {
    btn() {
      console.log(9999);
      bus.$emit("shareUserInput", this.inputObj);
      //  console.log(this.inputObj);
    },
  },
};
</script>


<style lang="less" scoped>
.search_container {
  width: 400px;
  height: 50px;
  //   border: 1px solid red;
  display: flex;
  justify-content: baseline;
  position: relative;
  top: -20%;
  left: 50%;
  margin-left: -250px;

  input {
    width: 300px;
    border-radius: 5px;
    margin-right: 5px;
  }
  input:focus {
    box-shadow: 0 0 15px #03a9f4;
    border-style: solid;
    border-color: #03a9f4;
  }
}
</style>